<template>
  <div class="main">
    <el-container class="container">
      <el-aside :width="isCollapse ? '63px':'210px'">
        <LeftMenu @change-collapse="changeCollapse"/>
      </el-aside>
      <el-container>
        <el-header class="header">
          <Breadcrumb/>
        </el-header>
        <el-main class="content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LeftMenu from '@/components/left-menu/LeftMenu.vue'
import Breadcrumb from '@/components/breadcrumb/Breadcrumb.vue';
const isCollapse = ref(false)
const changeCollapse = (collapse:boolean) => {
  isCollapse.value = collapse
}
</script>

<style scoped lang="less">
.main{
  height: 100%;
  .container{
    height: 100%;
  }
  .header{
    height: 48px;
    line-height: 48px;
  }
  .content {
    background-color: #f0f2f5;

  }
}
</style>